<template>
	<view class="pageBox" :style="{paddingTop: statusBarHeight + 44 + 'px',}">
		<view class="topHead flex-between" :style="{top: statusBarHeight + 'px',}">
			<uni-icons type="back" size="24" @click="goBack"></uni-icons>
			<view class="title">
				我的余额
			</view>
			<image class="bean3" src="http://www.bobei.shop/static/third/bean3.png" @click="goPage('/balance/yiFuBalanceCopy')"></image>
		</view>
		
		<view class="balanceBox">
			<view class="balanceTop flex-between">
				<view class="balanceTopLeft">
					<view class="balanceTopLeftText">
						可提现金额（元）
					</view>
					<view class="balanceTopLeftNum">
						{{ withdrawable }}
					</view>
				</view>
				<view class="balanceTopRight flex">
					<button :plain="true" class="balanceTopRightBtn" @click="goPage('/balance/recharge')">充值</button>
					<button :plain="true" class="balanceTopRightBtn" @click="goPage('/balance/withdraw')">提现</button>
				</view>
			</view>
			<view class="balanceBom flex-row">
				<view class="balanceBomItem">
					<view class="balanceBomItemTop">
						累计提现金额（元）
					</view>
					<view class="balanceBomItemBom">
						{{ addMoney }}
					</view>
				</view>
				
				<view class="balanceBomItem">
					<view class="balanceBomItemTop">
						累计提现笔数
					</view>
					<view class="balanceBomItemBom">
						{{ addNum }}
					</view>
				</view>
			</view>
		</view>
		
		<view class="detailsTitle">
			账户明细：
		</view>
		
		<view class="list">
			<view class="listItem" v-for="item in list" :key="item.id">
				<view class="ym">
					{{ item.year }}年{{ item.month }}月
				</view>
				<view class="listItemMain flex-between">
					<view class="listItemMainLeft flex">
						<view class="date">
							<view class="dateTop">
								{{ item.day }}
							</view>
							<view class="dateBom">
								{{ item.week }}
							</view>
						</view>
						<view class="remarks">
							<view class="remarksTop">
								{{ item.creditName }}
							</view>
							<view class="remarksBom">
								{{ item.remark }}
							</view>
						</view>
					</view>
					<view class="listItemMainRight flex">
						<view class="listItemMainRightTop">
							{{ item.num }}元
						</view>
						<view class="listItemMainRightBom">
							余额：{{ item.afterNum }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="listStatus"></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: "",
				
				withdrawable: 0, // 可提现金额
				addMoney: 0, // 累计提现金额
				addNum: 0, // 累计提现笔数
				
				list: [],
				form: {
					page: 1,
					lastId: 0,
					creditType: "credit_1",
					direction: "",
				},
				loading: false,
				finished: false,
			}
		},
		onLoad() {
			this.statusBarHeight = this.$mySysInfo().top;
		},
		onShow() {
			this.list = [];
			this.form.page = 1;
			this.form.lastId = 0;
			this.loading = false;
			this.finished = false;
			this.getList();
		},
		onReachBottom() {
			this.getList();
		},
		computed: {
			listStatus() {
				if (this.finished) return "noMore";
				if (this.loading) return "loading";
				return "more";
			}
		},
		methods: {
			getWeekDate(time = new Date()) {
				let weeks = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
				let date = new Date(time);
				let day = date.getDay();
				return weeks[day];
			},

			getList() {
				if (this.loading || this.finished) return;
				this.loading = true;
				this.$post({
					module: 'Finance',
					interface: 2100,
					data: this.form,
				}).then(res => {
					res.list.forEach((item) => {
						let date = new Date(item.createdAt);
						item.year = date.getFullYear();
						item.month = date.getMonth() + 1;
						item.day = date.getDate();
						item.week = this.getWeekDate(item.createdAt)
					})
					this.list = this.list.concat(res.list);
					this.withdrawable = res.creditValue;
					this.addMoney = res.withdrawalMoney;
					this.addNum = res.withdrawalNum;
					this.form.page = res.currentPage + 1;
					this.form.lastId = res.lastId;
					if (this.form.page > res.lastPage) {
						this.finished = true;
					}
					this.loading = false;
				}).catch(() => {
					this.loading = false;
				})
			},
			goBack() {
				const pages = getCurrentPages()
				if (pages.length === 1) {
					if (typeof params === 'number') {
						history.go(-params)
					} else {
						history.back()
					}
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		min-height: 100vh;
		background-color: #ffffff;
		line-height: 1.2;

		.topHead {
			background-color: #ffffff;
			height: 88rpx;
			width: 100%;
			padding: 0 32rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 3;

		

			.title {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				position: absolute;
				top: 22rpx;
				left: 50%;
				transform: translate(-50%, 0);
			}

			.bean3 {
				width: 36rpx;
				height: 36rpx;
			}
		}
	
		.balanceBox {
			width: 92%;
			height: 300rpx;
			
			background: #F2615F;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 24rpx auto 0;
			background-image: url("http://www.bobei.shop/static/third/balanceBoxBg.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			.balanceTop {
				border-bottom: 1px solid #FFFFFF;
				padding: 28rpx 38rpx 14rpx;
				height: 146rpx;
				.balanceTopLeft {
					.balanceTopLeftText {
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}
					.balanceTopLeftNum {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						margin-top: 20rpx;
					}
				}
				.balanceTopRight {
					flex-direction: column;
					.balanceTopRightBtn {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						width: 120rpx;
						height: 40rpx;
						background: #F37171;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						border: none;
					}
					.balanceTopRightBtn:nth-last-of-type(1) {
						margin-top: 16rpx;
					}
				}
			}
			.balanceBom {
				height: 152rpx;
				padding: 22rpx 38rpx 32rpx;
				.balanceBomItem {
					width: 50%;
					.balanceBomItemTop {
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}
					.balanceBomItemBom {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						margin-top: 8rpx;
					}
				}
			}
		}
		
		.detailsTitle {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			margin-top: 32rpx;
			padding-left: 30rpx;
		}
		
		.list {
			width: 92%;
			margin: 24rpx auto 0;
			background: linear-gradient(180deg, #FFF5F4 0%, #FFFFFF 14%);
			border-radius: 24rpx 24rpx 0px 0px;
			.listItem {
				padding: 18rpx 22rpx;
				.ym {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: normal;
					color: #000000;
					padding-bottom: 16rpx;
					border-bottom: 1px solid #D4D4D4;
				}
				.listItemMain {
					padding: 24rpx 0 22rpx;
					border-bottom: 1px solid #D4D4D4;
					.listItemMainLeft {
						.date {
							.dateTop {
								font-size: 24rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: normal;
								color: #000000;
							}
							.dateBom {
								font-size: 24rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: normal;
								color: #666666;
								margin-top: 14rpx;
							}
						}
						.remarks {
							margin-left: 64rpx;
							.remarksTop {
								font-size: 28rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #000000;
							}
							.remarksBom {
								font-size: 24rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: normal;
								color: #666666;
								margin-top: 8rpx;
							}
						}
					}
					.listItemMainRight {
						flex-direction: column;
						align-items: flex-end;
						.listItemMainRightTop {
							font-size: 24rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: normal;
							color: #000000;
						}
						.listItemMainRightBom {
							font-size: 24rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: normal;
							color: #666666;
							margin-top: 8rpx;
						}
					}
				}
			}
		}
		
	}
</style>
